<template>
  <view>
    <view
      class="flex benben-position-layout flex flex-wrap align-center course_flex_0"
      :style="{ height: 88 + StatusBarRpx + 'rpx', paddingTop: StatusBarRpx + 'rpx' }"
    >
      <view class="flex flex-wrap align-center justify-between flex-sub course_fd0_0">
        <view class="flex flex-wrap align-center MyPortrayal_fd0_0_c0">
          <text class="fu-iconfont2 MyPortrayal_fd0_0_c0_c0" @tap.stop="handleJumpDiy" data-type="back" data-url="1">&#xE794;</text>
        </view>
        <view class="flex flex-wrap align-stretch justify-center">
          <text class="course_fd0_0_c1_c0">课程目录</text>
        </view>
        <view class="flex flex-wrap align-center justify-end course_fd0_0_c0"></view>
      </view>
    </view>
    <view :style="{ height: 88 + StatusBarRpx + 'rpx' }"></view>
    <!-- 课程章节 -->
    <view class="coursePro-zhangjie" :style="{ minHeight: `calc(100vh - 88rpx - 110rpx - ${StatusBarRpx}rpx - var(--window-bottom))` }">
      <div class="total">
        <span style="font-size: 26rpx; margin-left: 24rpx">目录进度：</span>
        <span style="font-size: 26rpx; color: #3771fb; font-weight: bold">{{ numObj2.plan }}</span>
        <span style="font-size: 26rpx">/{{ numObj2.total_num }}</span>

        <view class="flex flex-wrap align-center">
          <view class="flex benben-progress-bar MyPortrayal_fd1_7_c1_c0_c1_c0">
            <view class="benben-progress-bar-center MyPortrayal_progress1_fd1_7_c1_c0_c1_c0" :style="{ width: numObj2.jindu + '%' }"></view>
          </view>
          <view class="number">
            {{ numObj2.jindu }}%
            <!-- {{ ((numObj2.total_num > 0 ? numObj2.jindu / numObj2.total_num : 0) * 100).toFixed(1) }}% -->
          </view>
        </view>
      </div>
      <scroll-view class="tree-container" v-if="docList.length > 0 && isup" scroll-y>
        <tree-item v-for="chapter in docList" :key="chapter.id" :nodeData="chapter" @hand-item="handItem" :level="0" @itemClick="onItemClick" />
      </scroll-view>
      <!-- 	<view class="list" v-if="docList.length>0 && isup">
				<view class="item" v-for="(item,key0) in docList" :key='key0'>
					<view class='flex flex-wrap align-center justify-between list_fd1_0_c0_c1_ibhf'>
						<view class="hid2 titlename flex-sub" v-if="item.zy_total" @tap.stop="jump(1,item)">{{item.name}}<text style="color: #3771FB;">({{item.zy_wc}}/{{item.zy_total}})</text> <image v-if="item.is_staduy" src="@/static/img02/14.png" alt="" /></view>
						<view class="hid2 titlename flex-sub" v-else @tap.stop="jump(1,item)">{{item.name}}<image v-if="item.is_staduy" src="@/static/img02/14.png" alt="" /></view>

						<view class='flex flex-wrap align-center '>
							<image class="list_fd1_0_c0_c1_c1_c1_ibhf" v-if=" item.isopen===false && item.children" src="@/static/images/down.png" mode="" @tap.stop="check(1,item,key0)"></image>
							<image class="list_fd1_0_c0_c1_c1_c1_ibhf" v-if=" item.isopen===true && item.children" src="@/static/images/up.png" mode="" @tap.stop="check(1,item,key0)"></image>

						</view>
					</view>
					<view class="" v-if="item.isopen" v-for="(child,key1) in item.children" :key='key1'>
						<view class='flex flex-wrap align-center justify-between list_fd1_0_c0_c1_ibhf'>
							<view class="flex-sub flex flex-wrap lefts" >
								<text class="hid2 diname" @tap.stop="jump(2,child)" style="margin-left: 36rpx;">{{child.name}}</text><text style="color: #3771FB;">({{child.zy_wc}}/{{child.zy_total}})</text>
								<image v-if="child.is_staduy" src="@/static/img02/14.png" alt="" />
							</view>
							<view class='flex flex-wrap align-center'>
								<image class="list_fd1_0_c0_c1_c1_c1_ibhf" v-if=" child.isopen===false && child.children"  src="@/static/images/down.png" mode="" @tap.stop="check(2,child,key1,key0)"></image>
								<image class="list_fd1_0_c0_c1_c1_c1_ibhf" v-if=" child.isopen===true && child.children" src="@/static/images/up.png" mode="" @tap.stop="check(2,child,key1,key0)"></image>

							</view>
						</view>
						<view class="" v-if="child.isopen" v-for="(childs,key2) in child.children" :key='key2'>
							<view class='flex flex-wrap align-center  list_fd1_0_c0_c1_ibhf lefts'>
								<text class="hid2 diname" @tap.stop="jump(3,childs)" style="margin-left: 72rpx;">{{childs.name}}</text><text style="color: #3771FB;">({{childs.zy_wc}}/{{childs.zy_total}})</text>
								<image v-if="childs.is_staduy" src="@/static/img02/14.png" alt="" />

							</view>
						</view>
					</view>
				</view>
			</view> -->
      <view v-if="docList.length == 0 && isup">
        <slot>
          <view class="public-page-empty">
            <image src="/static/global/order.png"></image>
            <view class="txt">暂无数据</view>
          </view>
        </slot>
      </view>
      <!-- <chartList :course="course" @myEvent="handleChildData2"></chartList> -->
    </view>
  </view>
</template>

<script>
import TreeItem from './tree-item/tree-item.vue'
import { encryptWeb } from '@/common/utils/crypto.js'
import { host, API_VERSION } from '@/common/config.js'
// import chartList from "./list.vue";
export default {
  components: {
    TreeItem,
    // MyComponent,
    // chartList,
    // ExperimentList
  },
  data() {
    return {
      isup: false,
      numObj2: {}, //章节进度
      docList: [],
      course: '1',
      group: uni.getStorageSync('USER_GROUP'),
      list: {
        name: '',
        cover: '',
        textbook_name: '',
        course_details: '',
        course_objectives: '',
        teacher: '',
        academic_year: '',
        basemajor_name: '',
        semester: '',
        class_period: '',
        duration_schedule: '',
        aid: '',
      },
    }
  },
  onLoad(options) {
    let { course } = options
    if (course !== undefined) this.course = course
    // this.getjf6f236d491017Func()
    this.get_course_chapterApi()
  },
  methods: {
    // 课程章节
    // handleChildData2(data) {
    // 	this.numObj2 = data
    // },
    //APP接口-查看课程详情
    async getjf6f236d491017Func() {
      //请求方法
      //数据验证
      let url = ''
      if (uni.getStorageSync('USER_GROUP') == 1) {
        url = global.apiUrls.post68ca2decb8b2c
      } else {
        url = global.apiUrls.post68c3989022b95
      }
      let datalist = await this.$api.get(url, {
        aid: this.course,
      })

      if (datalist.data.code != 1) {
        this.$message.info(datalist.data.msg)
        return
      }
      let infolist = datalist.data
      this.list = infolist.data
    },
    async get_course_chapterApi() {
      let res = await this.$api.post(global.apiUrls.post6818697f95795, {
        course_id: this.course,
      })
      this.isup = true
      if (res.data.code == 1) {
        this.numObj2 = res.data.data.num
        this.docList = res.data.data.list
        console.log(this.docList)
      }
    },
    check(type, item, key, key2) {
      if (type == 1) {
        this.docList[key].isopen = !this.docList[key].isopen
        this.docList.splice(key, 1, this.docList[key])
      } else {
        this.docList[key2].children[key].isopen = !this.docList[key2].children[key].isopen
      }

      // this.$forceUpdate()
    },
    handItem(node) {
      if (node.level <= 1) return
      let params = {
        cid: this.course,
        chaperid: node.aid,
        StatusBar: this.StatusBar,
        playScene: 'study',
        token: this.$store.state.token,
        api: host,
        mid: API_VERSION.replace('m', ''),
      }
      let path = `https://dev.gj.teacher.zhongbenjiaoyu.cn/video-business/chapter-preview?params=${encodeURIComponent(
        encryptWeb(JSON.stringify(params))
      )}`
      // let path = `http://localhost:5173/video-business/chapter-preview?params=${encodeURIComponent(encryptWeb(JSON.stringify(params)))}`
      uni.setStorageSync('zhongbenjiaoyuPath', path)
      uni.navigateTo({ url: `/pages/benben-built-in/web-view/web-view?params=1` })
    },
    jump(type, item) {
      // 章节最多就是三级，最底层级跳转，就是下边没有子级了能跳转
      // if (type == 1) {
      // 	if (item.children) {
      // 		return
      // 	}
      // } else if (type == 2) {
      // 	if (item.children) {
      // 		return
      // 	}
      // }
      let aidList = item.aid
      console.log(item)

      // this.$urouter.navigateTo(
      // 	`/pages/kc/zjzy/zjzy?aidList=${aidList}&name=${item.name}`
      // );
      // uni.navigateTo({
      // 	url: '/pages/kc/teacherzjxq/teacherzjxq?id='+item.aid
      // })
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background-color: #ffffff;
}

.coursePro-zhangjie {
  .total {
    // width: 100%;
    height: 106rpx;
    background: #f4f8fd;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    border: 1rpx solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    margin: 32rpx 24rpx;
  }
}

.MyPortrayal_fd1_7_c1_c0_c1_c0 {
  background: #fff;
  width: 300rpx;
  height: 28rpx;
  border-radius: 14rpx;
  background-size: 100% auto;
  margin-left: 44rpx;

  .MyPortrayal_progress1_fd1_7_c1_c0_c1_c0 {
    background: linear-gradient(90deg, #6e9cff 0%, #145efd 100%);
    border-radius: 14rpx;
  }
}

.number {
  font-weight: 500;
  font-size: 20rpx;
  color: #145efd;
  line-height: 28rpx;
  font-weight: 500;
  margin-left: 10rpx;
}

.list_fd1_0_c0_c1_ibhf {
  background: rgba(255, 255, 255, 1);
  min-height: 88rpx;
  padding: 24rpx 24rpx;
  /* margin-bottom: 24rpx; */
}
.diname {
  // width: 310px;
  // height: 40rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 28rpx;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.list_fd1_0_c0_c1_c1_c1_ibhf {
  width: 22rpx;
  height: 22rpx;
  // font-size: 20rpx;
  // color: #333333;
  // margin-left: 24rpx;
}

.titlename {
  color: #333333;
  font-weight: 500;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

image {
  width: 26rpx;
  height: 26rpx;
  // margin-top: 10rpx;
  margin-left: 16rpx;
}

.lefts {
  /* justify-content: center; */
  align-items: center;
}
.hid1 {
  max-width: 580rpx;
}
.public-page-empty {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 120upx 0 0 0;

  image {
    width: 300rpx;
    height: 300rpx;
  }

  .txt {
    font-size: 28upx;
    color: $uni-text-color;
    text-align: center;
    line-height: 100upx;
    color: var(--benben-loading-color, #999999);
  }

  .loadTips {
    line-height: 30upx;
  }

  .btn {
    width: 260upx;
    height: 78upx;
    line-height: 78upx;
    background: linear-gradient(309deg, rgba(254, 49, 0, 1) 0%, rgba(255, 90, 16, 1) 100%);
    opacity: 1;
    border-radius: 44upx;
    font-size: 28upx;
    color: #fff;
    text-align: center;
    margin-top: 100upx;
  }
}
.course_flex_0 {
  background: #fff;
  width: 750rpx;
  height: 88rpx;
  overflow: hidden;
  z-index: 10;
  top: 0rpx;
  background-size: 100% auto !important;
}
.course_fd0_0_c1_c0 {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
  line-height: 50rpx;
}

.course_fd0_0_c0 {
  // width: 120rpx;
}

.course_fd0_0 {
  padding: 0rpx 32rpx 0rpx 32rpx;
}
.tree-container {
  height: calc(100vh - 320rpx);
  padding: 0 24rpx;
}
</style>
